<!--
 * @Author: maqaing
 * @Date: 2021-09-16 14:07:42
 * @LastEditors: maqiang
 * @LastEditTime: 2021-09-23 14:56:42
 * @Description: 
-->
<template>
  <div>
    <!-- t头部标签 -->
    <Header></Header>
    <!-- {{ category }} -->
    <!-- <div>{{ArtData}}</div> -->
    <!-- 内容导航栏 -->
    <div class="parent">
      <div class="wrapper">
        <div class="head">
          <div class="title">学校要闻</div>
          <div class="pos">当前位置</div>
          <div class="nav">本网首页&gt;&gt;</div>
          <div class="new">学校要闻</div>
        </div>
      </div>
      <!-- 内容展示区 -->
      <div class="wrapper">
        <div class="body">
          <div @click="toArcList(item)"  class="content" v-for="item in ArtData.list" :key="item.id">
            <div class="top">{{ item.title }}</div>
            <div class="time">{{ item.publishTime | fmtDate }}</div>
            <div class="readtimes">阅读次数：{{ item.readTimes }}</div>      
          </div>
         <!-- 分页 -->
         <div class="page">
            <el-pagination
                background
                hide-on-single-page
                @current-change='handleChange'
                layout="prev, pager, next"
                :page-size='param.pageSize'
                :total="ArtData.total">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>

    <Footer></Footer>
  </div>
</template>

<script>
// 引入axios
import { get } from "../utils/request";
// 头部标签的引用
import Header from "./components/Head.vue";
import Footer from "./components/Foot.vue";

export default {
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      // 接收route传来的query
      category: {},
      param: {
        page: 1,
        pageSize: 4,
      },
      // 接收请求的内容
      ArtData: {},
    };
  },
  methods: {
    getArticleData() {
      this.param.categoryId = this.category.id;
      get("/index/article/pageQuery", this.param).then((res) => {
        // console.log(res.data);
        this.ArtData = res.data;
      });
    },
    // 分页
     handleChange(val) {
      // 使用当前页数与我们分页控制的参数进行赋值
      this.param.page = val;
      this.getArticleData()
    },
    // 跳转页面  进行路由传值
    toArcList(item) {
      this.$router.push({
        path: "/article",
        query: item,
      });
    },
  },
  watch: {
    "$route.query": {
      handler(query) {
        this.category = query;
        this.param.page = 1;
        this.getArticleData();
      },
    },
    deep: true,
  },
  created() {
    this.category = this.$route.query;
    // console.log(this.category);
    // 执行getArticleData方法
    this.getArticleData();
  },
};
</script>

<style lang="scss" scoped>
// 头部导航栏

.parent {
  // width: 00px;
  // margin: 0 auto;
  background-color: #ecf6f2;
  .wrapper {
    margin-top: 20px;
    line-height: 20px;
    .head {
      display: flex;
    }
    // 标题
    .title {
      margin-top: 10px;
      font-size: 30px;
      color: #028b39;
    }
    // 当前位置
    .pos {
      margin-top: 15px;
      font-size: 20px;
      margin-left: 10px;
    }
    // 本网首页
    .nav {
      margin-top: 16px;
      font-size: 15px;
      margin-left: 10px;
    }
    // 学校要闻
    .new {
      margin-top: 16px;
      font-size: 10px;
      margin-left: 10px;
    }
  }
  .wrapper {
    .body {
      min-height: 600px;
      // width: 1000px;
      // margin: 0 auto;
      background-color: #ffffff;

      .content {
        height: 100px;
        border-bottom: 1px solid black;
        .top {
          position: relative;
          top: 10px;
          margin-top: 10px;
          font-size: 30px;
        }
        .time {
          margin-top: 50px;
          float: left;
          font-size: 30px;
        }
        .readtimes {
          margin-top: 50px;
          font-size: 30px;
          margin-left: 400px;
        }
      }
    }
  }
}
</style>